<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<h1>
	<fmt:message key="accounts.show.title" />
</h1>

<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.number" />
		</div>
		<div class="col-sm-9">
			${account.number}
			<spring:url var="editUrl" value="{number}/edit">
				<spring:param name="number" value="${account.number}" />
			</spring:url>
			(<span class="link"><a id="editUrl" href="${editUrl}"><fmt:message key="command.edit" /></a></span>)
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.name" />
		</div>
		<div class="col-sm-9">
			${account.name}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.dateOfBirth"/>
		</div>
		<div class="col-sm-9">
			<fmt:formatDate value="${account.dateOfBirth}" />
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.email" />
		</div>
		<div class="col-sm-9">
			${account.email}
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.receiveNewsletter" />
		</div>
		<div class="col-sm-9">
			<fmt:message key="label.${account.receiveNewsletter}" />
		</div>
	</div>
	<div class="row">
		<div class="col-sm-3">
			<fmt:message key="label.Account.receiveMonthlyEmailUpdate" /> 
		</div>
		<div class="col-sm-9">
			<fmt:message key="label.${account.receiveMonthlyEmailUpdate}" />			
		</div>
	</div>
</div>


<div>
	<h2>
		<fmt:message key="label.Account.beneficiaries" />
	</h2>
	<c:if test="${!empty account.beneficiaries}">
				<table class="table">
					<thead>
						<tr>
							<th>
								<fmt:message key="label.Account.beneficiaries.name" />
							</th>
							<th>
								<fmt:message key="label.Account.beneficiaries.allocationPercentage" />
							</th>
							<th>
								<fmt:message key="label.Account.beneficiaries.savings" />
							</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach var="beneficiary" items="${account.beneficiaries}">
							<tr>
								<td>${beneficiary.name}</td>
								<td>${beneficiary.allocationPercentage}</td>
								<td id="${beneficiary.name}Savings">${beneficiary.savings}</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
	</c:if>
	<c:if test="${empty account.beneficiaries}">
		<fmt:message key="accounts.show.label.noBeneficaries" />
	</c:if>
</div>

<div id="error" class="alert alert-danger">
	This should be hidden, so your JavaScript has a syntax error.
</div>

<spring:url value="/rewards" var="rewardUrl" />
<spring:url value="/accounts" var="accountUrl" />
<script type="text/javascript">
	var stompClient = null;
	
	// On page load, hide the error div to show the JavaScript is working
	$(function() {
		$("#error").hide();
		connect();
	});
	
	/**
	 * Update beneficiaries with new balances.
	 */
	function updateBeneficiaries(data) {
		var beneficiaries = JSON.parse(data.body).beneficiaries;
		for(var i=0;i<beneficiaries.length;i++) {
			var beneficiary = beneficiaries[i];
			$('#'+beneficiary.name+'Savings').html('$'+beneficiary.savings.toFixed(2));
		}
	}
	
	/**
	 * Subscribe to /topic/accounts.${account.number} and use updateBeneficiaries()
	 * as the callback to process each message received.
	 */
	function subscribeUsingUpdateBeneficiariesCallback(frame) {
	    console.log('Connected: ' + frame);
	    // Subscribe to topic, each message will be processed by updateBeneficiaries
	    stompClient.subscribe('/topic/accounts.${account.number}', updateBeneficiaries);
	}
	
	/**
	 * Create the web-socket and use the connected callback to subscribe to
	 * messages - see subscribeUsingUpdateBeneficiariesCallback().
	 */ 
	function connect() {
		// TODO 08: Connect to the web socket endpoint using SockJS.
		//          Create a STOMP client, just like you did before
		//          Subscribe to the account topic using the
		//            subscribeUsingUpdateBeneficiariesCallback()
		//            when connecting.
		
		// Again three lines of JavaScript expected here ...
			
		<%-- TO DO 08 (continued) ...	          

			Once this is done, re-deploy the application
			Open the application in two tabs of an EXTERNAL browser

			Generate a new reward in the first tab and check on the second tab
			that the corresponding account details page received the message
			(use the JavaScript console of the browser)
			
			If you submit the reward again, you should see the beneficiary totals
			in the account detaisl tab have changed immediately

			Reminder: Use the 1234123412341234 credit card number, which credits
			account 1234567890 (Keith and Keri Donald)
		--%>

	}
</script>
